<template>
  <div class="app-container">
    <el-row :gutter="24">
      <el-col :span="24">
        <el-card style="margin-bottom: 10px">
          距离考试结束还有：
          <fy-timer v-model="paperData.leftSeconds" @timeout="handHandExam" />

          <el-button
            style="float: right; margin-top: -10px"
            type="primary"
            icon="el-icon-plus"
            :loading="loading"
            @click="handHandExam()"
          >
            交卷
          </el-button>
        </el-card>
      </el-col>

      <el-col :span="6" :xs="24" style="margin-bottom: 10px">
        <el-card>
          <p class="card-title">答题卡</p>
          <el-row :gutter="24" class="card-line" style="padding-left: 10px">
            <el-tag type="info">未作答</el-tag>
            <el-tag type="success">已作答</el-tag>
            <el-tag type="warning">当前题</el-tag>
          </el-row>

          <div
            v-if="paperData.radios !== undefined && paperData.radios.length > 0"
          >
            <p class="card-title">单选题</p>
            <el-row :gutter="24" class="card-line">
              <el-tag
                @click="toQu(item)"
                v-for="item in paperData.radios"
                :type="cardItemClass(item.answered, item.quId)"
              >
                {{ item.sort }}</el-tag
              >
            </el-row>
          </div>

          <div
            v-if="paperData.multis !== undefined && paperData.multis.length > 0"
          >
            <p class="card-title">多选题</p>
            <el-row :gutter="24" class="card-line">
              <el-tag
                @click="toQu(item)"
                v-for="item in paperData.multis"
                :type="cardItemClass(item.answered, item.quId)"
                >{{ item.sort }}</el-tag
              >
            </el-row>
          </div>

          <div
            v-if="paperData.judges !== undefined && paperData.judges.length > 0"
          >
            <p class="card-title">判断题</p>
            <el-row :gutter="24" class="card-line">
              <el-tag
                @click="toQu(item)"
                v-for="item in paperData.judges"
                :type="cardItemClass(item.answered, item.quId)"
                >{{ item.sort }}</el-tag
              >
            </el-row>
          </div>

          <div v-if="paperData.jdts !== undefined && paperData.jdts.length > 0">
            <p class="card-title">简答题</p>
            <el-row :gutter="24" class="card-line">
              <el-tag
                @click="toQu(item)"
                v-for="item in paperData.jdts"
                :type="cardItemClass(item.answered, item.quId)"
                >{{ item.sort }}</el-tag
              >
            </el-row>
          </div>
        </el-card>
      </el-col>

      <el-col :span="18" :xs="24">
        <el-card class="qu-content">
          <p v-if="quData.content">
            {{ quData.sort }}.<span v-html="quData.content"></span>
          </p>
          <!-- <p v-if="quData.image!=null && quData.image!=''">
            <el-image :src="quData.image" style="max-width:100%;" />
          </p> -->
          <!-- 单选、判断 -->
          <div v-if="quData.quType === 1 || quData.quType === 3">
            <el-radio-group v-model="radioValue">
              <el-radio v-for="item in quData.answers" :label="item.answerId"
                >{{ item.abc }}.{{ item.content }}
                <div
                  v-if="item.image != null && item.image != ''"
                  style="clear: both"
                >
                  <el-image :src="item.image" style="max-width: 100%" />
                </div>
              </el-radio>
            </el-radio-group>
          </div>
          <!-- 多选题 -->
          <div v-if="quData.quType === 2">
            <el-checkbox-group v-model="multiValue">
              <el-checkbox v-for="item in quData.answers" :label="item.answerId"
                >{{ item.abc }}.{{ item.content }}
                <div
                  v-if="item.image != null && item.image != ''"
                  style="clear: both"
                >
                  <el-image :src="item.image" style="max-width: 100%" />
                </div>
              </el-checkbox>
            </el-checkbox-group>
          </div>

          <!-- 简答题 -->
          <div v-if="quData.quType === 4">
            <el-input v-model="fillanswerDTO.answer"></el-input>
          </div>
        </el-card>

        <div style="margin-top: 20px">
          <el-button
            v-if="showPrevious"
            type="primary"
            icon="el-icon-back"
            @click="handPrevious()"
          >
            上一题
          </el-button>

          <el-button
            v-if="showNext"
            type="warning"
            icon="el-icon-right"
            @click="handNext()"
          >
            下一题
          </el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { dtk, fillanswer, handlePaper } from "@/api/paper";
import { getQudetail } from "@/api/qu";
//导入组件
import fyTimer from "@/components/fyTimer.vue";
export default {
  data() {
    return {
      loading: false,
      paperData: {},
      cardItem: {}, //记录当前作答题目
      currentIndex: 0,
      quData: { quDetail: {}, answers: [] },
      multiValue: [],
      showPrevious: true,
      showNext: true,
      allCards: [], //存放所有题目
      radioValue: "",
      fillanswerDTO: {
        answerIds: [],
      },
    };
  },
  //定义组件
  components: {
    fyTimer,
  },
  methods: {
    fetchPaperData(paperId) {
      dtk(paperId).then((res) => {
        this.paperData = res.data;
        console.log(this.paperData);

        //初始化cardItem(找第一道题)
        if (this.paperData.radios) {
          this.cardItem = this.paperData.radios[0];
        } else if (this.paperData.multis) {
          this.cardItem = this.paperData.multis[0];
        } else if (this.paperData.judges) {
          this.cardItem = this.paperData.judges[0];
        } else {
          this.cardItem = this.paperData.jdts[0];
        }

        res.data.radios.forEach((item) => {
          this.allCards.push(item);
        });

        res.data.multis.forEach((item) => {
          this.allCards.push(item);
        });

        res.data.judges.forEach((item) => {
          this.allCards.push(item);
        });
        res.data.jdts.forEach((item) => {
          this.allCards.push(item);
        });

        //渲染第一道题
        this.fetchQuDetail(this.cardItem.quId);

        // //按钮渲染
        this.preNextIsShow();
      });
    },

    //获取题目的详情
    fetchQuDetail(quId) {
      console.log("!!!!");
      getQudetail(this.paperId, quId).then((res) => {
        console.log(res);
        this.quData = res.data;

        //radiosvalue
        if (this.quData.quType == 1 || this.quData.quType == 3) {
          this.quData.answers.forEach((item) => {
            if (item.checked == 1) {
              this.radioValue = item.answerId;
            }
          });
        }

        //multivalues
        if (this.quData.quType == 2) {
          this.multiValue = [];
          this.quData.answers.forEach((item) => {
            if (item.checked == 1) {
              this.multiValue.push(item.answerId);
            }
          });
        }
      });
    },
    // 答题卡样式
    cardItemClass(answered, quId) {
      if (quId === this.cardItem.quId) {
        return "warning";
      }

      if (answered == 1) {
        return "success";
      }

      if (answered != 1) {
        return "info";
      }
    },

    toQu(item) {
      this.radioValue = "";
      this.multiValue = [];

      this.cardItem = item;
      //查询题目的详情
      this.fetchQuDetail(item.quId);

      this.preNextIsShow();
    },
    preNextIsShow() {
      //遍历所有的题,题号一致，就找到了该题的下标
      this.allCards.forEach((item, index) => {
        if (item.sort == this.cardItem.sort) {
          this.currentIndex = index;
        }
      });

      if (this.currentIndex == 0) {
        this.showPrevious = false;
        this.showNext = true;
      } else if (this.currentIndex == this.allCards.length - 1) {
        this.showPrevious = true;
        this.showNext = false;
      } else {
        this.showPrevious = true;
        this.showNext = true;
      }
    },
    handPrevious() {
      //提交答案
      this.fillanswerDTO.paperId = this.paperId;
      this.fillanswerDTO.quId = this.cardItem.quId;

      //单选题、判断题
      if (this.radioValue != "") {
        this.fillanswerDTO.answerIds = [this.radioValue];
      }

      //多选题
      if (this.multiValue.length > 0) {
        this.fillanswerDTO.answerIds = this.multiValue;
      }

      fillanswer(this.fillanswerDTO).then((res) => {
        if (res.code == 0) {
          //进入上一道题
          this.cardItem = this.allCards[this.cardItem.sort - 2];

          this.fetchQuDetail(this.cardItem.quId);
          this.preNextIsShow();
        }
      });
    },
    handNext() {
      //提交答案
      this.fillanswerDTO.paperId = this.paperId;
      this.fillanswerDTO.quId = this.cardItem.quId;

      if (this.radioValue != "") {
        this.fillanswerDTO.answerIds = [this.radioValue];
      }

      if (this.multiValue.length > 0) {
        this.fillanswerDTO.answerIds = this.multiValue;
      }

      fillanswer(this.fillanswerDTO).then((res) => {
        console.log(res);

        if (res.code == 0) {
          //进入下一道题
          this.cardItem = this.allCards[this.cardItem.sort];

          this.fetchQuDetail(this.cardItem.quId);
          this.preNextIsShow();
        }
      });
    },
    handHandExam() {
      handlePaper(this.paperId).then((res) => {
        console.log(res);
        if (res.code == 0) {
          //交卷成功
          //跳转到用户的试卷页面
        }
        alert(res.msg);
      });
    },
  },
  created() {
    //获取试卷id
    this.paperId = this.$route.query.paperId;
    if (this.paperId) {
      //获取试卷信息
      this.fetchPaperData(this.paperId);
    }
  },
};
</script>

<style scoped>
.qu-content div {
  line-height: 30px;
}

.el-checkbox-group label,
.el-radio-group label {
  width: 100%;
}

.card-title {
  background: #eee;
  line-height: 35px;
  text-align: center;
  font-size: 14px;
}
.card-line {
  padding-left: 10px;
}
.card-line span {
  cursor: pointer;
  margin: 2px;
}

/deep/ .el-radio,
.el-checkbox {
  padding: 9px 20px 9px 10px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  margin-bottom: 10px;
}

.is-checked {
  border: #409eff 1px solid;
}

.el-radio img,
.el-checkbox img {
  max-width: 200px;
  max-height: 200px;
  border: #dcdfe6 1px dotted;
}

/deep/ .el-checkbox__inner {
  display: none;
}

/deep/ .el-radio__inner {
  display: none;
}

/deep/ .el-checkbox__label {
  line-height: 30px;
}

/deep/ .el-radio__label {
  line-height: 30px;
}
</style>